<script setup lang="ts" name="MenuTree">
import { defineProps } from 'vue'
const props = defineProps(['menuList'])
</script>

<template>
  <div>
    <template v-for="item in props.menuList" :key="item.path">
      <!-- {{ item }} -->
      <!--      分为两种方式渲染：有子菜单和没有子菜单-->
      <el-sub-menu :index="item.path" v-if="item.children">
        <template #title>
          <span>{{ item.meta.title }}</span>
        </template>
        <!--        有子菜单的继续遍历（递归）-->
        <MenuTree :menuList="item.children"></MenuTree>
      </el-sub-menu>
      <!--      没有子菜单-->
      <el-menu-item :index="item.path" v-if="!item.children">
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<style></style>
